<template>
  <view class="issue-container">
    <uni-forms ref="form" :model="formData" :rules="rules">
      <uni-forms-item label="事项编号" name="issueNo">
        <uni-easyinput v-model="formData.issueNo" placeholder="请输入事项编号" />
      </uni-forms-item>
      <uni-forms-item label="事项类型" name="issueType">
        <uni-data-select v-model="formData.issueType" :localdata="issueTypes" placeholder="请选择事项类型" />
      </uni-forms-item>
      <uni-forms-item label="事项标题" name="title">
        <uni-easyinput v-model="formData.title" placeholder="请输入事项标题" />
      </uni-forms-item>
      <uni-forms-item label="事项描述" name="description">
        <uni-easyinput v-model="formData.description" type="textarea" placeholder="请输入事项描述" />
      </uni-forms-item>
      <uni-forms-item label="优先级" name="priority">
        <uni-data-select v-model="formData.priority" :localdata="priorities" placeholder="请选择优先级" />
      </uni-forms-item>
      <uni-forms-item label="截止日期" name="dueDate">
        <uni-datetime-picker v-model="formData.dueDate" type="date" />
      </uni-forms-item>
      <uni-forms-item label="负责人" name="assignee">
        <uni-easyinput v-model="formData.assignee" placeholder="请输入负责人姓名" />
      </uni-forms-item>
    </uni-forms>
    
    <view class="button-group">
      <button class="submit-btn" @click="submitForm">提交事项</button>
      <button class="reset-btn" @click="resetForm">重置</button>
    </view>

    <!-- 事项列表 -->
    <view class="issue-list">
      <view class="list-title">事项列表</view>
      <uni-list>
        <uni-list-item v-for="(item, index) in issueList" :key="index"
          :title="item.title"
          :note="item.description"
          :rightText="item.status"
          showArrow
          @click="viewDetail(item)"
          :thumb="getStatusIcon(item.status)"
        />
      </uni-list>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        issueNo: '',
        issueType: '',
        title: '',
        description: '',
        priority: '',
        dueDate: '',
        assignee: ''
      },
      rules: {
        issueNo: {
          rules: [{
            required: true,
            errorMessage: '请输入事项编号'
          }]
        },
        issueType: {
          rules: [{
            required: true,
            errorMessage: '请选择事项类型'
          }]
        },
        title: {
          rules: [{
            required: true,
            errorMessage: '请输入事项标题'
          }]
        },
        priority: {
          rules: [{
            required: true,
            errorMessage: '请选择优先级'
          }]
        },
        assignee: {
          rules: [{
            required: true,
            errorMessage: '请输入负责人姓名'
          }]
        }
      },
      issueTypes: [{
        value: 'task',
        text: '任务'
      }, {
        value: 'bug',
        text: '问题'
      }, {
        value: 'improvement',
        text: '改进'
      }],
      priorities: [{
        value: 'high',
        text: '高'
      }, {
        value: 'medium',
        text: '中'
      }, {
        value: 'low',
        text: '低'
      }],
      issueList: []
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate().then(res => {
        // TODO: 实现事项提交逻辑
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
      }).catch(err => {
        console.error(err)
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
    loadIssueList() {
      // TODO: 实现事项列表加载逻辑
    },
    viewDetail(item) {
      // TODO: 实现查看详情逻辑
    },
    getStatusIcon(status) {
      // TODO: 根据状态返回对应的图标
      return ''
    }
  },
  onLoad() {
    this.loadIssueList()
  }
}
</script>

<style lang="scss" scoped>
.issue-container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.button-group {
  margin-top: 40rpx;
  padding: 0 20rpx;
  
  .submit-btn {
    background-color: #007aff;
    color: #fff;
    margin-bottom: 20rpx;
  }
  
  .reset-btn {
    background-color: #f8f8f8;
    color: #666;
    border: 1px solid #ddd;
  }
}

.issue-list {
  margin-top: 40rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;

  .list-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }
}
</style>